<%--
  Created by IntelliJ IDEA.
  User: User
  Date: 2020/10/26
  Time: 15:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>出版社排行</title>
    <script src="${pageContext.request.contextPath}/static/jquery-3.5.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/echarts.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" charset="GBK">
    <script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<%--刷新按钮--%>
<p onclick="refresh()" class="layui-icon layui-icon-refresh layui-anim layui-anim-scaleSpring"></p>

<%--搜索条件表单--%>
<form class="layui-form" id="searchForm">
    <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
        <div class="layui-inline">
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="year" id="year" placeholder="年份" class="layui-input">
            </div>
            <label class="layui-form-label">范围</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="monthMin" id="month1" placeholder="起始月" autocomplete="off"
                       class="layui-input">
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="monthMax" id="month2" placeholder="结束月" autocomplete="off"
                       class="layui-input">
            </div>
            <div class="layui-input-inline" style="width: 50px;">
                <button type="button" onclick="getData()"
                        class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal">搜索
                </button>
            </div>
            <div class="layui-input-inline" style="width: 50px;">
                <button type="reset" onclick="refresh()" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary">重置
                </button>
            </div>
        </div>
    </div>
</form>
<br>
<div id="main" style="width: 1000px;height:400px;"></div>
</body>
<script type="text/javascript">

    $(function (){
        getData();
    });

    // 页面刷新按钮
    function refresh(){
        $("#searchForm")[0].reset()
        getData();
    }

    // 基于准备好的dom，初始化echarts实例
    var tdata = [];
    var pdata = [];
    function getData(){
        $.ajax({
            url: '/bookServlet/rankingPublisher',
            type: 'post',
            data: $("#searchForm").serialize(),
            async: false,
            dataType: 'json',
            success: function (result) {
                console.log(result)
                tdata = result.total;
                pdata = result.publisher;
                main();
            }
        });
    }

    function main() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '出版社销售排行'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: pdata
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: tdata
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

</script>

<%--时间选择器--%>
<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#year' //指定元素
            , type: 'year'
            , calendar: true
        });
        laydate.render({
            elem: '#month1' //指定元素
            , format: 'MM'
            , type: 'month'
            , calendar: true
        });
        laydate.render({
            elem: '#month2' //指定元素
            , format: 'MM'
            , type: 'month'
            , calendar: true
        });
    });
</script>
</html>
